<#assign path = request.getContextPath() />
<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>访客管理</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="${path}/static/css/font.css">
        <link rel="stylesheet" href="${path}/static/css/css.css">
		<link rel="stylesheet" type="text/css" href="${path}/static/css/xadmin.css"/>
        <script src="${path}/static/lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="${path}/static/js/jquery.min.js"></script>
        <script src="${path}/static/js/xadmin.js" type="text/javascript"></script>
    </head>
    
    <body>
        <div class="x-nav">
                <a href="../index.html">首页</a>
				<span>></span>
                <a><cite>访客管理</cite></a>
         
            <!-- <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a> -->
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div >
						<button type="button" class="btn" onclick="addGuest()">单个新增</button>
						<button type="button" class="btn" onclick="uploadGuestBatch()">批量传照片</button>
						<button type="button" class="btn" onclick="exportGuest()">导出</button>
					</div>
					
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <div class="layui-form layui-col-space5">
                            <#--<form class="layui-form layui-col-space5">-->
                      
								<div class="layui-input-inline layui-show-xs-block">
									<input type="text" id="g_name" name="username" placeholder="姓名" class="layui-input" maxlength="15">
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<input type="number" id="g_mobile" name="username" placeholder="手机号" class="layui-input" maxlength="11">
								</div>
								<div class="layui-input-inline layui-show-xs-block">
									<input type="number" id="g_idNo" name="username" placeholder="身份证号" class="layui-input" maxlength="18">
								</div>
                                
                                <div class="layui-input-inline layui-show-xs-block">
                                    <#--<button class="layui-btn" lay-submit="" lay-filter="sreach">-->
                                        <#--<i class="layui-icon">&#xe615;</i></button>-->
                                        <button class="layui-btn" onclick="searchGuest()">
                                            <i class="layui-icon">&#xe615;</i></button>
                                </div>
                                </div>
                            <#--</form>-->
                        </div>
                     <!--   <div class="layui-card-header">
                            <button class="layui-btn layui-btn-danger" onclick="delAll()">
                                <i class="layui-icon"></i>批量删除</button>
                            <button class="layui-btn" onclick="xadmin.open('添加用户','./order-add.html',800,600)">
                                <i class="layui-icon"></i>添加</button></div> -->
                        <div class="layui-card-body ">
                            <table class="layui-table layui-form">
                                <thead>
                                    <tr>
                                        <th>
                                            <input type="checkbox" name="" lay-skin="primary">
                                        </th>
                                        <th>访客</th>
                                        <th>性别</th>
                                        <th>访客电话</th>
                                        <th>身份证号</th>
										<th>最近被访者</th>
                                        <th>被访者手机号</th>
										<th>操作</th>
									</tr>
                                </thead>
                                <tbody>
                                <#if datas?? && (datas?size > 0)>
                                    <#list datas as item>
                                    <tr>
                                        <td><input type="checkbox" name="" lay-skin="primary"></td>
                                        <td>${item.name}</td>
                                        <td>
                                            <#if item.gender == 1>
                                                男
                                            <#elseif item.gender == 2>
										    女
                                            </#if>
                                        </td>
                                        <td>${item.mobile}</td>
                                        <td>${item.identityNo}</td>
										<td>${item.empName}</td>
                                        <td>${item.empMobile}</td>
                                        <td class="td-manage">
                                            <a title="查看" href="javascript:;" onclick="updateGuest(this)" class="ft-color" id="${item.id}" name="state">
                                                <#if item.state == 1>
                                                    禁用
                                                <#else>
                                                    启用
                                                </#if>
                                            </a>
											<a title="编辑" href="javascript:;" class="ft-color">编辑</a>
											<#if item.photoId?? >
                                                <a title="查看" href="javascript:;" class="ft-color"
                                                   onclick="showPhoto('${item.photoId}')">查看照片</a>
                                            <#else >
                                            <a title="上传" href="javascript:;" class="ft-color"
                                               onclick="uploadGuestPhoto(this)">上传照片</a>
                                            <input type="file" style="display: none"
                                                   onchange="uploadFile(event, '${item.id}')"/>
                                            </#if>
											<a title="查看" href="javascript:;" class="ft-color" onclick="showGuestLog('${item.id}')">访问流水</a>
                                        </td>
                                    </tr>
                                    </#list>
                                </#if>
                                </tbody>
                            </table>
                        </div>
                        <div class="layui-table-page">
                            <div id="layui-table-page1">
                                <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-3">
                                    <a href="javascript:;" class="layui-laypage-prev layui-disabled"
                                       data-page="0"><i class="layui-icon"></i>
                                    </a>
                                    <span class="layui-laypage-curr">
										<em class="layui-laypage-em"></em>
										<em>1</em>
									</span>
                                    <a href="javascript:;" data-page="2">2</a>
                                    <a href="javascript:;" data-page="3">3</a>
                                    <span class="layui-laypage-spr">…</span>
                                    <a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="300">300</a>
                                    <a href="javascript:;" class="layui-laypage-next" data-page="2">
                                        <i class="layui-icon"></i>
                                    </a>
                                    <span class="layui-laypage-skip">
										到第 <input type="text" min="1" value="1" class="layui-input">页
										<button type="button" class="layui-laypage-btn">确定</button>
									</span>
                                    <span class="layui-laypage-count">共 300 条</span>
                                    <span class="layui-laypage-limits">
										<select lay-ignore="">
											<option value="10" selected="">10 条/页</option>
											<option value="20">20 条/页</option>
											<option value="30">30 条/页</option>
											<option value="40">40 条/页</option>
											<option value="50">50 条/页</option>
											<option value="100">100 条/页</option>
										</select>
									</span>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card-body ">
                            <div class="page">
                                <div>
                                    <a class="prev" href="">&lt;&lt;</a>
                                    <a class="num" href="">1</a>
                                    <span class="current">2</span>
                                    <a class="num" href="">3</a>
                                    <a class="num" href="">489</a>
                                    <a class="next" href="">&gt;&gt;</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script>
        layui.use(['laydate', 'form'],
                function () {
                    var laydate = layui.laydate;

                    //执行一个laydate实例
                    laydate.render({
                        elem: '#start' //指定元素
                    });

                    //执行一个laydate实例
                    laydate.render({
                        elem: '#end' //指定元素
                    });
                });

        /*用户-停用*/
        function member_stop(obj, id) {
            layer.confirm('确认要停用吗？',
                    function (index) {

                        if ($(obj).attr('title') == '启用') {

                            //发异步把用户状态进行更改
                            $(obj).attr('title', '停用');
                            $(obj).find('i').html('&#xe62f;');

                            $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                            layer.msg('已停用!', {
                                icon: 5,
                                time: 1000
                            });

                        } else {
                            $(obj).attr('title', '启用');
                            $(obj).find('i').html('&#xe601;');

                            $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                            layer.msg('已启用!', {
                                icon: 5,
                                time: 1000
                            });
                        }

                    });
        }

        /*用户-删除*/
        function member_del(obj, id) {
            layer.confirm('确认要删除吗？',
                    function (index) {
                        //发异步删除数据
                        $(obj).parents("tr").remove();
                        layer.msg('已删除!', {
                            icon: 1,
                            time: 1000
                        });
                    });
        }

        function delAll(argument) {

            var data = tableCheck.getData();

            layer.confirm('确认要删除吗？' + data,
                    function (index) {
                        //捉到所有被选中的，发异步进行删除
                        layer.msg('删除成功', {
                            icon: 1
                        });
                        $(".layui-form-checked").not('.header').parents('tr').remove();
                    });
        }

        // 查询
        function searchGuest() {
            var gName = $('#g_name').val();
            var identityNo = $('#g_idNo').val();
            var mobile = $('#g_mobile').val();
            // 查询
            $.ajax({
                url: "/api/employee/guest",
                type: "GET",
                data: {
                    name: gName,
                    mobile: mobile,
                    identityNo: identityNo,
                    pageSize: 10,
                    page: 1
                },
                success: function (data) {
                    console.log(data);
                    var dataMap = eval('(' + data.datas + ')');
                    var list = dataMap.datas;
                    var html = '';
                    for (var i in list) {
                        var item = list[i];
                        var gender = '';
                        var state = '';
                        if (item.gender == 1) {
                            gender = '男';
                        } else {
                            gender = '女';
                        }
                        if (item.state == 1) {
                            state = '禁用';
                        } else {
                            state = '启用';
                        }
                        var photoInfo = '';
                        if (item.photoId == '') {
                            photoInfo = '<a title="上传" href="javascript:;" class="ft-color"' +
                                    'onclick="uploadGuestPhoto(this)">上传照片</a>' +
                                    '<input type="file" style="display: none"\n' +
                                    'onchange="uploadFile(event, '+item.id+')"/>';
                        } else {
                            photoInfo = '<a title="查看" href="javascript:;" class="ft-color" ' +
                                    'onclick="showPhoto('+item.photoId+')">查看照片</a>';
                        }


                        html += '<tr>' +
                                '<td><input type="checkbox" name="" lay-skin="primary">' +
                                '<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>' +
                                '</td>' +
                                '<td>' + item.name + '</td>' +
                                '<td>' + gender + '</td>' +
                                '<td>' + item.mobile + '</td>' +
                                '<td>' + item.identityNo + '</td>' +
                                '<td>' + item.empName + '</td>' +
                                '<td>' + item.empMobile + '</td>' +
                                '<td class="td-manage"><a title="查看" href="javascript:;" onclick="updateGuest(this)" class="ft-color" id="'+item.id+'" name="state">'+state+'</a>' +
                                '<a title="查看" href="javascript:;" class="ft-color">编辑</a>\n' +
                                photoInfo +
                                '<a title="查看" href="javascript:;" class="ft-color" onclick="showGuestLog('+item.id+')">访问流水</a>' +
                                '</td>'
                        '</tr>';
                    }
                    $('table').find("tbody").html(html);
                }
            });
        }
        // 导出访客信息
        function exportGuest() {
            var gName = $('#g_name').val();
            var identityNo = $('#g_idNo').val();
            var mobile = $('#g_mobile').val();
            window.open("/api/employee/guest/export?name="+gName+"&mobile="+mobile+"&identityNo="+identityNo,"_self");
        }

        // 上传照片
        function uploadGuestBatch() {
            location.href="/userManage/upload/guest/photo";
        }
        //新增访客
        function addGuest() {
            layer.open({
                type: 2,
                title: ['新增访客', 'font-size:10'],
                shadeClose: false,
                area: ['500px', '480px'],
                content: '/userManage/guest/add',
                resize: false,
                shade: 0.5,
                maxmin: true,
                btn: ['关闭'],
                btn2:function(index, layero) {
                    layer.closeAll();
                }
            });
        }
        // 更新信息
        function updateGuest(obj) {
            var state = $(obj).text().trim();
            if (state == '禁用') {
                state = 1;
            } else {
                state = 2;
            }
            var guestId = $(obj).attr('id');
            $.ajax({
                url:'/api/employee/guest/state',
                type:'POST',
                data:{
                    guestId: guestId,
                    state: state,
                },
                success: function (res) {
                    console.log(res);
                    if (res.status == 200) {
                        var status = res.datas;
                        layer.msg("修改成功", {
                            icon: 6,
                            time:1000,
                        });
                        if (status == 1) {
                            $(obj).html("禁用");
                        } else {
                            $(obj).html("启用");
                        }
                    }
                }
            });
        }
        function uploadGuestPhoto(obj) {
            $(obj).siblings('input').trigger('click');
        }

        function uploadFile(event, guestId) {
            var formData = new FormData();
            formData.append('file', event.target.files[0]);
            formData.append("guestId", guestId)
            $.ajax({
               url:'/api/employee/upload/guest/single',
                type:'POST',
                data:formData,
                processData : false, // 使数据不做处理
                contentType : false,
                success: function (res) {
                    console.log(res);
                    if (res.status == 200) {
                        layer.msg("上传成功",{
                            icon:6
                        },function () {
                            location.reload();
                        });
                    }
                }
            });
        }

        function showPhoto(photoId) {
            console.log(photoId)
            layer.open({
                type: 2,
                title: ['查看图片', 'font-size:10'],
                shadeClose: false,
                area: ['300px', '300px'],
                content: '/userManage/guest/showpic?photoId='+photoId,
                resize: false,
                shade: 0.5,
                maxmin: true,
                btn: ['关闭'],
                btn2:function(index, layero) {
                    layer.closeAll();
                }
            });
        }

        function showGuestLog(guestId) {
            // location.href="/userManage/guest/log?guestId="+guestId;
            layer.open({
                type: 2,
                title: ['查看流水', 'font-size:10'],
                shadeClose: false,
                area: ['600px', '400px'],
                content: '/userManage/guest/log?guestId='+guestId,
                resize: false,
                shade: 0.5,
                maxmin: true,
                btn: ['关闭'],
                btn2:function(index, layero) {
                    layer.closeAll();
                }
            });
        }

    </script>

</html>

						